<div id="providers-configuration">
    <div id="providers-configuration-header">
        <h1 id="providers-configuration-header-title">{{ title }}</h1>
        {{# there_are_providers }}
        <button type="button" class="tlp-button-primary add-provider-button">
            <i class="fa fa-plus tlp-button-icon"></i> {{ add_new_provider }}
        </button>
        {{/ there_are_providers }}
    </div>

    {{# providers_presenters }}
    <section class="tlp-pane">
        <div class="tlp-pane-container">
            <div class="tlp-pane-header">
                <h1 class="tlp-pane-title">
                    {{# getIcon }}<i class="fa fa-{{ getIcon }} tlp-pane-title-icon"></i>{{/ getIcon }} {{ getName }}
                    {{# is_a_provider_configured_as_unique_authentication_endpoint }}
                        {{# isUniqueAuthenticationEndpoint }}
                            <span class="tlp-badge-success provider-configuration-unique-authentication-source">
                                {{ unique_authentication_source }}
                            </span>
                        {{/ isUniqueAuthenticationEndpoint }}
                        {{^ isUniqueAuthenticationEndpoint }}
                            <span class="tlp-badge-secondary tlp-badge-outline provider-configuration-unique-authentication-source">
                                {{ unique_authentication_source_disabled }}
                            </span>
                        {{/ isUniqueAuthenticationEndpoint }}
                    {{/ is_a_provider_configured_as_unique_authentication_endpoint }}
                </h1>
            </div>
            <section class="tlp-pane-section provider-info">
                <div class="provider-endpoint">
                    <div class="tlp-property">
                        <label class="tlp-label">
                            {{ authorization_endpoint }}
                        </label>
                        <p>{{ getAuthorizationEndpoint }}</p>
                    </div>
                    <div class="tlp-property">
                        <label class="tlp-label">
                            {{ token_endpoint }}
                        </label>
                        <p>{{ getTokenEndpoint }}</p>
                    </div>
                    <div class="tlp-property">
                        <label class="tlp-label">
                            {{ userinfo_endpoint }}
                        </label>
                        {{# getUserInfoEndpoint }}
                        <p>{{ getUserInfoEndpoint }}</p>
                        {{/ getUserInfoEndpoint }}
                        {{^ getUserInfoEndpoint }}
                        <p class="tlp-property-empty">{{ empty_content }}</p>
                        {{/ getUserInfoEndpoint }}
                    </div>
                </div>
                <div class="provider-client">
                    <div class="tlp-property">
                        <label class="tlp-label">
                            {{ client_id }}
                        </label>
                        {{# getClientId }}
                        <p>{{ getClientId }}</p>
                        {{/ getClientId }}
                        {{^ getClientId }}
                        <p class="tlp-property-empty">{{ empty_content }}</p>
                        {{/ getClientId }}
                    </div>
                    <div class="tlp-property">
                        <label class="tlp-label">
                            {{ client_secret }}
                        </label>
                        {{# getClientSecret }}
                        <p>{{ getClientSecret }}</p>
                        {{/ getClientSecret }}
                        {{^ getClientSecret }}
                        <p class="tlp-property-empty">{{ empty_content }}</p>
                        {{/ getClientSecret }}
                    </div>
                </div>
            </section>
        </div>
        <div class="tlp-pane-container provider-action-container">
            <section class="tlp-pane-section provider-action">
                <button
                    type="button"
                    class="tlp-button-primary tlp-button-outline provider-action-edit-button"
                    data-edit-modal-id="siteadmin-config-providers-modal-update-{{ getId }}"
                >
                    <i class="fa fa-pencil tlp-button-icon"></i>
                    {{ btn_edit }}
                </button>
                <button type="button"
                    class="tlp-button-danger tlp-button-outline provider-action-delete-button"
                    data-delete-modal-id="siteadmin-config-providers-modal-delete-{{ getId }}"
                >
                    <i class="fa fa-trash-o tlp-button-icon"></i>
                    {{ btn_delete }}
                </button>
            </section>
        </div>

        {{> administration-providers-modal-delete }}

        {{> administration-providers-modal-update }}
    </section>
    {{/ providers_presenters }}
    {{^ there_are_providers }}
        <div class="empty-page">
            <p class="empty-page-text">{{ empty_providers_text_start }}<br>{{ empty_providers_text_end }}</p>
            <button type="button" class="tlp-button-primary tlp-button-large add-provider-button">
                <i class="fa fa-plus tlp-button-icon"></i> {{ add_new_provider }}
            </button>
        </div>
    {{/ there_are_providers}}

    {{> administration-providers-modal-create }}
</div>
